<template>
  <div class="zcb-search">
    <div class="tab-box" v-if="props.tabsList?.length">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="sonTabsActiveName">
        <el-tab-pane v-for="item in props.tabsList" :key="item.name" :label="item.title" :name="item.name">
          <slot name="tabCon"></slot>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="header">
      <span class="title">
        {{ title }}
      </span>
      <div class="btn">
        <slot name="btn"> </slot>
      </div>
    </div>
    <slot name="radio"></slot>
    <div class="search-form" v-if="props.isShowSearch === 0">
      <search-form ref="searchFormRef" :schema="props.schema" :formData="formData" @updataValue="updataValue"></search-form>
    </div>
    <div class="search-btn" v-if="props.isShowSearch === 0">
      <el-button type="info" @click="submitForm">
        <i class="ued ued-shaixuan btnIcon"></i>
        {{ t('keys.filter') }}
      </el-button>
      <el-button type="info" @click="resetForm">
        <i class="ued ued-qingkong btnIcon"></i>
        {{ t('keys.clear') }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import SearchForm from './search-form.vue'
import { ref, watch, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const emit = defineEmits(['search-submit', 'reset-submit', 'onSonTabsActiveName'])
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  schema: {
    type: Array,
    default: () => []
  },
  isShowSearch: {
    type: Number,
    default: 0
  },
  tabsParasm: {
    type: Object,
    default: () => {}
  },
  tabsList: {
    type: Array,
    default: () => []
  },
  acitveName: {
    type: String,
    default: ''
  }
})
const href = window.location.pathname
const menuItem = JSON.parse(localStorage.getItem('changeMenuItem'))
const title = ref(props.title)
if (href === localStorage.getItem('moduleName') + menuItem.route) {
  title.value = menuItem.menuName
}
const searchFormRef = ref()
const formData = ref({})

// 点击搜索按钮事件
const submitForm = () => {
  emit('search-submit', formData.value)
}
// 重置按钮事件
const resetForm = () => {
  setFormValue(props.schema)
  searchFormRef.value.resetFormData()
  emit('reset-submit', formData.value)
}
const setFormValue = (val) => {
  for (const v of val) {
    let data = (formData.value[v.field] = '')
    formData.value = { ...formData.value, ...data }
  }
}
// 子组件更新数据
const updataValue = (val) => {
  formData.value = { ...formData.value, ...val }
}
const activeName = ref(props.acitveName)
const sonTabsActiveName = (tab, event) => {
  emit('onSonTabsActiveName', tab.props.name)
}
watch(
  () => props.acitveName,
  (newValue, oldValue) => {
    activeName.value = newValue
  },
  { immediate: true }
)
nextTick(setFormValue(props.schema))
</script>

<style lang="scss" scoped>
.zcb-search {
  z-index: 100;
  background: #fff;
  margin: 0 -16px;
  padding-bottom: 12px;
  .tab-box {
    padding: 0 16px;
    border-bottom: 4px solid #f2f3f5;
    :deep(.el-tabs) {
      .el-tabs__header {
        margin: 0;
      }
    }
  }
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 43px;
    border-bottom: 1px var(--el-border-color) var(--el-border-style);
    .title {
      display: flex;
      align-items: center;
      color: var(--el-text-color-primary);
      padding-left: 16px;
      padding-right: 10px;
      font-weight: bolder;
      width: -moz-max-content;
      width: max-content;
      font-size: 14px;
    }
    .btn {
      display: flex;
      padding-right: 16px;
      flex: 1;
      justify-content: flex-end;
      :deep(.el-button) {
        height: 28px;
      }
    }
  }
  .search-form {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 16px 4px 16px;
  }
  .search-btn {
    display: flex;
    padding-left: 16px;
    :deep(.el-button) {
      height: 28px;
      line-height: 28px;
      .btnIcon {
        font-size: 14px;
        margin-right: 4px;
      }
    }
  }
}
</style>
